﻿@{
    ViewBag.Title = Resources.AdminSite;
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}
<div class="clearfix">
    <table id="list" class="scroll" cellpadding="0" cellspacing="0">
    </table>
    <div id="pager">
    </div>
</div>
<script type="text/javascript">

    var typeID = '@this.ViewContext.RouteData.Values["typeID"]';
    var editImageUrl = '@Url.Content("~/Content/images/ico-edit.gif")';
    var deleteImageUrl = '@Url.Content("~/Content/images/ico-delete.gif")';
    var createUrl = '@Url.Content("~/Admin/Category/Create/")';
    var updateUrl = '@Url.Content("~/Admin/Category/Update")';
    var deleteUrl = '@Url.Content("~/Admin/Category/Delete")';
    var getdataUrl = '@Url.Content("~/Admin/Category/GetGridData/")';

    Sys.require(["jqGrid"],
        function () {
            var grid = $("#list").jqGrid({
                url: getdataUrl + typeID,
                datatype: 'json',
                mtype: 'GET',
                width: 640,
                height: 250,
                colNames: ['@Resources.CategoryGridID', '@Resources.CategoryGridName', '@Resources.CategoryGridType', '@Resources.GridEditHeader', '@Resources.GridDeleteHeader'],
                colModel: [
                      { name: 'ID', index: 'ID', width: 40, align: 'center', editable: false },
                      { name: 'Name', index: 'Name', width: 200, align: 'center', editable: true },
                      { name: 'Type', index: 'TypeID', width: 100, align: 'center', editable: true, stype: 'select', edittype: "select", editoptions: { value: "0:All;1:Book;2:Album;3:Note"} },
                      { name: 'EditColumn', index: 'Edit', width: 40, align: 'center', stype: 'null' },
                      { name: 'DeleteColumn', index: 'Delete', width: 40, align: 'center', stype: 'null'}],
                pager: '#pager',
                rowNum: 10,
                rowList: [10, 20],
                viewrecords: true,
                jsonReader: {
                    root: "Rows",
                    page: "PageIndex",
                    total: "TotalPages",
                    records: "TotalCount",
                    repeatitems: false,
                    userdata: "UserData",
                    id: "ID"
                },
                multiselect: false,
                loadComplete: function () {
                    { afterLoadComplete.call($('#list'), updateUrl, "EditColumn", editImageUrl, 'afterClickEdit', '@Resources.EditCategoryTitle'); }
                    { afterLoadComplete.call($('#list'), deleteUrl, "DeleteColumn", deleteImageUrl, 'afterClickDelete', '@Resources.DeleteCategoryTitle'); }
                }
            })
            .navGrid('#pager', { edit: false, add: true, del: false, search: false }, {},
              {
                  reloadAfterSubmit: true,
                  url: createUrl,
                  addCaption: '@Resources.AddCategoryTitle',
                  modal: true,
                  closeAfterAdd: true,
                  afterSubmit: processErrorAfterSubmit
              }
            )
            .navButtonAdd("#pager", { caption: "@Resources.CategoryToggleAction", title: "@Resources.CategoryToggleTitle", buttonicon: 'ui-icon-pin-s',
                onClickButton: function () {
                    grid[0].toggleToolbar()
                }
            })
            .navButtonAdd("#pager", { caption: "@Resources.CategoryClearAction", title: "@Resources.CategoryClearTitle", buttonicon: 'ui-icon-refresh',
                onClickButton: function () {
                    grid[0].clearToolbar()
                }
            });

            grid.filterToolbar();
            grid[0].toggleToolbar();
        }); 
        
</script>
